<template>
  <div class="player-card">
    <div class="card-header">
      <div class="player-info">
        <img 
          :src="player.avatar || '/default-avatar.png'" 
          :alt="player.nickname"
          class="avatar"
        />
        <div class="player-details">
          <h3 class="player-name">{{ player.nickname }}</h3>
          <p class="player-username">@{{ player.username }}</p>
          <div class="player-meta">
            <span class="player-level">{{ getLevelName(player.level) }}</span>
            <span class="player-status" :class="player.status">
              {{ getStatusName(player.status) }}
            </span>
          </div>
        </div>
      </div>
      
      <div class="player-score">
        <div class="score-item">
          <span class="score-label">总分</span>
          <span class="score-value">{{ player.stats.totalScore }}</span>
        </div>
        <div class="score-item">
          <span class="score-label">破案数</span>
          <span class="score-value">{{ player.stats.solvedCases }}</span>
        </div>
      </div>
    </div>
    
    <div class="card-content">
      <div class="player-stats">
        <div class="stat-item">
          <span class="stat-label">准确率</span>
          <span class="stat-value">{{ getAccuracy }}%</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">连胜</span>
          <span class="stat-value">{{ player.stats.currentStreak }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">总案件</span>
          <span class="stat-value">{{ player.stats.totalCases }}</span>
        </div>
      </div>
      
      <div class="player-currency">
        <div class="currency-item">
          <span class="currency-icon">💰</span>
          <span class="currency-value">{{ player.coins }}</span>
        </div>
        <div class="currency-item">
          <span class="currency-icon">💎</span>
          <span class="currency-value">{{ player.gems }}</span>
        </div>
      </div>
      
      <div class="player-actions">
        <button 
          v-if="showAddFriend && !isFriend"
          @click="handleAddFriend"
          class="btn btn-primary"
          :disabled="isLoading"
        >
          添加好友
        </button>
        <button 
          v-if="showAddFriend && isFriend"
          @click="handleRemoveFriend"
          class="btn btn-secondary"
          :disabled="isLoading"
        >
          移除好友
        </button>
        <button 
          v-if="showViewProfile"
          @click="handleViewProfile"
          class="btn btn-outline"
        >
          查看档案
        </button>
      </div>
    </div>
    
    <div class="card-footer">
      <div class="player-activity">
        <span class="activity-label">最后活跃</span>
        <span class="activity-time">{{ formatLastActive(player.lastActiveAt) }}</span>
      </div>
      <div class="player-online-status">
        <span 
          class="online-indicator"
          :class="{ online: player.isOnline }"
        ></span>
        <span>{{ player.isOnline ? '在线' : '离线' }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Player } from '@/entities/Player';
import { 
  getPlayerLevelName, 
  getPlayerStatusName,
  PlayerLevel,
  PlayerStatus 
} from '@/entities/Player';

interface Props {
  player: Player;
  currentPlayerId?: string;
  showAddFriend?: boolean;
  showViewProfile?: boolean;
  isLoading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  currentPlayerId: '',
  showAddFriend: false,
  showViewProfile: true,
  isLoading: false
});

const emit = defineEmits<{
  addFriend: [playerId: string];
  removeFriend: [playerId: string];
  viewProfile: [player: Player];
}>();

// 计算属性
const getAccuracy = computed(() => {
  const stats = props.player.stats;
  const total = stats.solvedCases + stats.failedCases;
  return total > 0 ? Math.round((stats.solvedCases / total) * 100) : 0;
});

const isFriend = computed(() => {
  if (!props.currentPlayerId) return false;
  return props.player.friendList.includes(props.currentPlayerId);
});

// 方法
const getLevelName = (level: PlayerLevel) => {
  return getPlayerLevelName(level);
};

const getStatusName = (status: PlayerStatus) => {
  return getPlayerStatusName(status);
};

const formatLastActive = (lastActiveAt: string) => {
  const lastActive = new Date(lastActiveAt);
  const now = new Date();
  const diffMs = now.getTime() - lastActive.getTime();
  const diffMins = Math.floor(diffMs / 60000);
  const diffHours = Math.floor(diffMs / 3600000);
  const diffDays = Math.floor(diffMs / 86400000);
  
  if (diffMins < 1) return '刚刚';
  if (diffMins < 60) return `${diffMins}分钟前`;
  if (diffHours < 24) return `${diffHours}小时前`;
  if (diffDays < 7) return `${diffDays}天前`;
  
  return lastActive.toLocaleDateString();
};

const handleAddFriend = () => {
  emit('addFriend', props.player.id);
};

const handleRemoveFriend = () => {
  emit('removeFriend', props.player.id);
};

const handleViewProfile = () => {
  emit('viewProfile', props.player);
};
</script>

<style scoped>
.player-card {
  background: var(--color-background);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}

.player-details {
  flex: 1;
}

.player-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: var(--color-text);
}

.player-username {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0 0 4px 0;
}

.player-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.player-level {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--color-primary);
  color: white;
  border-radius: 4px;
}

.player-status {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text-secondary);
}

.player-status.active {
  background: #e8f5e8;
  color: #4caf50;
}

.player-status.inactive {
  background: #fff3e0;
  color: #ff9800;
}

.player-status.banned {
  background: #ffebee;
  color: #f44336;
}

.player-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.score-label {
  font-size: 10px;
  color: var(--color-text-secondary);
}

.score-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.card-content {
  margin-bottom: 16px;
}

.player-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--color-background-soft);
  border-radius: 8px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-label {
  font-size: 10px;
  color: var(--color-text-secondary);
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.player-currency {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.currency-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--color-background-soft);
  border-radius: 16px;
}

.currency-icon {
  font-size: 14px;
}

.currency-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.player-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-secondary);
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-secondary-dark);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-primary);
  color: white;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-secondary);
}

.player-activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-label {
  font-size: 10px;
}

.player-online-status {
  display: flex;
  align-items: center;
  gap: 4px;
}

.online-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
}

.online-indicator.online {
  background: #4caf50;
}

@media (max-width: 480px) {
  .card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .player-info {
    margin-bottom: 12px;
  }
  
  .player-score {
    align-items: center;
  }
  
  .player-stats {
    flex-direction: column;
    gap: 8px;
  }
  
  .player-actions {
    flex-direction: column;
  }
  
  .card-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
</style>